<template>
  <div class="flag" style="padding-top: 20px;">
    <div class="kflex" style="margin-bottom: 20px;  padding: 0 20px;">
      <el-input style="width: 300px;" type="text" placeholder="请输入身份证号" v-model="search.id_card"></el-input>
      <el-button type="danger" round @click="getlist" style="margin: 0 20px;">搜索</el-button>
    </div>
    <div class="hei10" style="margin-bottom: 20px; height: 5px;"></div>
    <div class="kflexbc" style="margin-bottom: 20px;  padding: 0 20px;">
      <div class="kflexc">
        <el-button type="danger" round @click="add">添加</el-button>
        <upload-excel-component @on-selected-file="exportData" buttonName="批量添加"></upload-excel-component>
      </div>
      <div style="background: #F3F5F8; border-radius: 20px; overflow: hidden;">
        <el-button type="primary" round @click="daochu" style=" margin-right: 0;">导出</el-button>
        <el-button type="text" style="color: #333333; margin-left: 0;" @click="xiazai">模板下载</el-button>
      </div>
    </div>

    <div style="margin: 0 20px;  box-sizing: border-box;">
      <el-table :data="tableData" border v-loading="loading">
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="created_at" label="添加时间"></el-table-column>
        <el-table-column prop="id_card" label="身份证号"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="bianji(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="shanchu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:right; margin-top:20px">
      <el-pagination background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye"
        :page-size="search.pagesize" :total="total"></el-pagination>
    </div>

    <el-dialog :title="title" center :visible.sync="log" width="600px" :close-on-click-modal="false"
      :close-on-press-escape="false" :show-close="true">

      <div class="kflexcc">
        <div class="f1" style="text-align: right;">身份证号：</div>
        <div class="f2"><el-input style="width: 300px;" type="text" placeholder="请输入身份证号"
            v-model="zu.idnumber"></el-input></div>
      </div>


      <span slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="tijiao" :disabled="ing" v-if="!zu.id">确定</el-button>
        <el-button type="primary" round @click="bianjigo" :disabled="ing" v-if="zu.id">确定</el-button>
      </span>
    </el-dialog>

    <!-- <div style="margin: 20px 0; font-size: 18px;">该黑名单仅影响本店铺</div> -->
  </div>
</template>

<script>
  import all from '@/assets/all.js'
  import axios from "axios";
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  export default {
    name: 'flag',
    components: {
      UploadExcelComponent
    },
    data() {
      return {
        loading: true,
        zu: {
          id: "",
          mobile: "",
          idnumber: "",
          type: 2,
          black_type: 1
        },
        tableData: [],
        total: 0,
        search: {
          pagesize: 20,
          page: 1,
          type: 2,
          id_card: "",
          black_type: 1
        },
        log: false,
        ing: false,
        title: ""
      }
    },
    created() {
      this.getlist()
    },
    methods: {
      daochu: function() {
        axios.get('/api/plan-market/export/black/list', {
            params: {
              type: 2,
              mobile: this.search.mobile,
              id_card: this.search.id_card,
              black_type: 1
            }
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              location.href = location.origin + '/' + response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      bianji: function(item) {

        this.title = '编辑'
        this.zu = {
          id: item.id,
          mobile: item.mobile,
          idnumber: item.id_card,
          type: 2,
          black_type: 1
        }
        this.log = true
      },
      add: function() {
        this.title = '添加'
        this.zu = {
          id: "",
          mobile: "",
          idnumber: "",
          type: 2,
          black_type: 1
        }
        this.log = true
      },

      bianjigo: function() {
        this.ing = true

        if (!all.checkidnum(this.zu.idnumber)) {
          this.ing = false
          return false
        }

        axios.post('/api/plan-market/black/update', this.zu)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist()
              this.log = false
              this.$message.success("发布成功");
              setTimeout(() => {
                this.ing = false
              }, 500)

            } else {
              this.$message.error(response.data.msg.info);
              setTimeout(() => {
                this.ing = false
              }, 500)
            }
          })
      },

      shanchu: function(item) {
        this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/black/delete', {
              id: item.id,
              type: 2
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.search.page = page
        this.getlist()
      },
      xiazai: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '批量添加身份证号.xlsx');
        a.setAttribute('href', window.location.origin + window.location.pathname +
          'static/shangchuanshoujihaodeng2.xlsx');
        a.click();
      },
      getlist: function() {
        axios.get('/api/plan-market/black/list', {
            params: this.search
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
              this.loading = false
            }
          })
      },
      tijiao: function() {
        this.ing = true
        if (!all.checkidnum(this.zu.idnumber)) {
          this.ing = false
          return false
        }
        axios.post('/api/plan-market/black/info/add', {
            mobile: this.zu.mobile,
            idnumber: this.zu.idnumber,
            black_type: 1
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("发布成功");
              this.log = false
              this.getlist()
              setTimeout(() => {
                this.ing = false
              }, 500)
            } else {
              this.$message.error(response.data.msg.info);
              setTimeout(() => {
                this.ing = false
              }, 500)
            }
          })
      },
      exportData(data) {

        var that = this;
        var mobiles = []
        var idnumbers = []

        //导入的导入修改数据
        if (data.header[0] == "身份证号") {
          for (let i in data.results) {
            let obj2 = {
              idnumber: data.results[i]['身份证号']
            }
            idnumbers.push(obj2)
          }

          axios.post('/api/plan-market/black/infos/add', {
              idnumbers: idnumbers,
              black_type: 1
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success("添加成功");
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";

  /deep/ #drop .el-button--primary {
    background-color: #FFF0F5;
    color: #2974FF;
    border: 1px #2974FF solid;
    margin-left: 20px;
    border-radius: 20px;
  }
</style>
